<script setup>
import { useBookingStore } from '@/stores/index.js'

const BookingStore = useBookingStore()

const props = defineProps({
	reservation_info: {
		type: Array,
		required: true
	},
	reservation_type: {
		type: String,
		required: true
	},
	place_name: {
		type: String,
		required: true
	},
	place_id: {
		type: Number,
		required: true
	}
})

// 点击预定项跳转预定页面
const onClickReservationItem = (item) => {
	uni.navigateTo({
		url: '/ComprehensivePackage/Booking/Booking'
	})

	// 将预定信息数据存入Pinia
	BookingStore.setInfoData({ ...item, placeType: props.reservation_type, placeName: props.place_name, placeID: props.place_id })
}
</script>

<template>
	<view class="header">{{ reservation_type === 'scenery' ? '景点门票' : reservation_type === 'hotel' ? '酒店预定' : '餐厅套餐' }}</view>
	<view class="container">
		<view class="infolist">
			<view class="list-item" v-for="(item, index) in reservation_info" :key="index" @tap="onClickReservationItem(item)">
				<view class="item-type">{{ reservation_type === 'scenery' ? item.ticket_type : reservation_type === 'hotel' ? item.room_type : item.package_name }}</view>
				<view class="item-desc">{{ item.description }}</view>
				<view class="item-price">
					<view class="money">￥</view>
					<view class="number">{{ reservation_type === 'scenery' ? item.ticket_price : reservation_type === 'hotel' ? item.room_price : item.package_price }}</view>
					<view class="end">起</view>
					<view class="item-btn">预订</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.header {
	background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
	font-size: 40rpx;
	font-weight: bold;
	padding: 20rpx;
	margin: 20rpx 0;
	color: #fff;
}

.container {
	background-color: #ffffff;
	border-radius: 30rpx;
	margin-bottom: 20rpx;

	.infolist {
		padding: 30rpx;

		.list-item {
			width: 100%;
			background-color: #f7f8fa;
			border-radius: 30rpx;
			padding: 20rpx;
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;

			.item-type {
				font-size: 40rpx;
				font-weight: bold;
			}

			.item-desc {
				font-size: 30rpx;
				color: #919499;
				padding: 20rpx 0;
			}

			.item-price {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.money {
					color: #fb4223;
					font-size: 30rpx;
				}

				.number {
					font-size: 45rpx;
					font-weight: bold;
					color: #fb4223;
				}

				.end {
					font-size: 30rpx;
					color: #fb4223;
				}

				.item-btn {
					width: 120rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					border-radius: 30rpx;
					margin-left: 20rpx;
					background-color: #fc7417;
					color: #fff;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
